Smart Members Subscription PRO

Overview

Description

Smart Members Subscription PRO Plugin

Introducing ZealousWeb’s Smart Members Subscription PRO, the ultimate solution for managing member profiles in ExpressionEngine 7. This comprehensive plugin offers a user-friendly interface and robust functionality to streamline your membership management process.

Key Features:

  • Member Profile Management: Effortlessly add, view, and modify member profiles.
  • Customizable Modules: Includes Register Member, Edit Profile, Forgot Password, Reset Password, View Profile, and Delete Profile modules.
  • Social Login Support: Allows members to log in using social media accounts, enhancing convenience and user experience.
  • Subscription Management: Integrate front-end subscription management and configure payment gateways seamlessly.

Compatibility with Smart Member PRO: Smart Members Subscription PRO is an extended version of the Smart Member PRO add-on. It introduces subscription features while retaining all existing functionalities from Smart Member PRO. To use this add-on, ensure that Smart Member PRO is already installed, as Smart Members Subscription PRO utilizes the same database tables. Do not uninstall Smart Member PRO after installing this add-on to avoid any disruptions.

For Developers: The add-on uses ExpressionEngine hooks for seamless integration with the core files. For developers looking to customize or extend functionality, a list of hooks used by the add-on is provided to facilitate easier reference and integration with other add-ons.

Upgrade your member

Plugin's purpose and benefits

  • Export Members: Easily export member data to manage and analyze information outside of ExpressionEngine.
  • Import Members: Quickly import member data to update or add profiles in bulk.
  • Member Custom Fields: Tailor member profiles with customizable fields to capture specific information relevant to your needs.
  • Additional Features:

    • Profile Management: Add, view, and modify member profiles with ease.
    • Social Login: Enable members to log in using social media accounts for a streamlined access experience.
    • Subscription Integration: Manage front-end subscriptions and configure payment gateways to suit your requirements.

    Get Started

    Quick setup instructions

    Download the Extension zip to your desktop.
    Step 1
    Download 
Zip File
    Download the Extension zip to your desktop.
    If downloaded as a zip archive, extract the Extension to your magento2 setup.
    Step 2
    Extract
    If downloaded as a zip archive, extract the Extension to your magento2 setup.
    With your FTP program, upload the Extension folder to the app/code folder in your directory.
    Step 3
    Upload
    With your FTP program, upload the Extension folder to the app/code folder in your directory.
    Run Setup Upgrade and static-content-deploy commands from your root.
    Step 4
    Commands
    Run Setup Upgrade and static-content-deploy commands from your root.
    Activate the extension and configurations.
    Step 5
    Active Extension
    Activate the extension and configurations.
    Questions about our plugins?

    How To Use & Features

    Validation Rule

    These validation rules help ensure that form inputs meet specific criteria, enhancing data quality and user experience. Here’s a summary of how each rule works and when to use them:

    1. required: Ensures the field is not left empty.
      • Example
        required
    2. valid_email: Validates that the input is a properly formatted email address.
      • Example
         valid_email
    3. valid_emails: Checks that all emails in a comma-separated list are valid.
      • Example
        valid_emails
    4. min_length: Ensures the input is at least a specified number of characters long.
      • Example
        min_length[5]
    5. max_length: Ensures the input does not exceed a specified number of characters.
      • Example
         max_length[10]
    6. exact_length: Ensures the input is exactly a specified number of characters long.
      • Example
        exact_length[10]
    7. matches: Validates that the input matches the value of another field.
      • Example
        matches[password_confirmation]
    8. alpha: Ensures the input contains only alphabetical characters.
      • Example
        alpha
    9. alpha_numeric: Ensures the input contains only alphanumeric characters.
      • Example
        alpha_numeric
    10. alpha_dashEnsures the input contains only alphanumeric characters, underscores, or dashes.
      • Example
        alpha_dash
    11. numeric: Ensures the input contains only numeric characters.
      • Example
        numeric
    12. integer: Ensures the input is a valid integer.
      • Example
        integer
    13. decimal: Ensures the input is a valid decimal number.
      • Example
        decimal
    14. is_natural: Ensures the input is a natural number (positive integers including zero).
      • Example: is_natural
    15. is_natural_no_zero: Ensures the input is a natural number but not zero.
      • Example
        is_natural_no_zero
    16. valid_ipEnsures the input is a valid IP address.
      • Example
        valid_ip
    17. sm_captcha_validate: Validates CAPTCHA input (used for security).
      • Example
        sm_captcha_validate
    18. is_unique: Ensures the input value is unique within a specified database table.
      • Example
        is_unique[members.email]
    19. exists_email: Checks if the email exists in a specified database table.
      • Example
        exists_email
    20. auth_password: Validates that the entered password matches the current password.
      • Example
         auth_password

    You can use these rules to validate various types of user input, ensuring that your forms are both secure and user-friendly.

    Hooks

    Hooks in a plugin or system like Smart Members allow you to extend or modify functionality without changing the core code. Here’s a breakdown of the available hooks and their purposes:

    Form Building Hooks
    1. sm_build_form_start
      Triggered at the beginning of form building.
    2. sm_before_logout_link
      Triggered before the logout link is rendered.
    3. sm_build_form_end
      Triggered at the end of form building.
    Form Submission Hooks
    1. sm_submit_form_start
      Triggered at the start of form submission.
    2. sm_logout_start
      Triggered at the start of the logout process.
    3. sm_submit_form_end
      Triggered at the end of form submission.
    Error Handling Hooks
    1. sm_error_in_form
      Triggered if there are errors found in the form.
    2. sm_outer_error
      Triggered for outer-level errors.
    Validation Hooks
    1. sm_init_validation
      Triggered to initialize validation rules.
    Profile Viewing Hooks
    1. sm_view_profile_start
      Triggered at the start of viewing a profile.
    2. sm_view_profile_end
      Triggered at the end of viewing a profile.

    Email Hooks

    1. sm_before_send_email
      Triggered before sending an email.
    Field Listing Hook
    1. sm_total_fields
      Triggered to list the total number of fields (Constructor Hook).
    Social Media Login Hooks (Pro Feature)
    1. sm_before_social_login
      Triggered before social media login.
    2. sm_after_social_login
      Triggered after social media login.
    Import Member Hooks (Pro Feature [EE4 only])
    1. sm_element_before_impor
      Triggered before importing a member.
    2. sm_element_after_import
      Triggered after importing a member.
    ExpressionEngine Default Hooks
    1. member_member_register_start
      Triggered at the start of member registration.
    2. member_member_register_errors
      Triggered for registration errors.
    3. member_member_registe
      Triggered during member registration.
    4. member_member_logout
      Triggered during member logout.
    5. member_delete
      Triggered when a member is deleted.
    6. member_update_start
      Triggered at the start of member update.
    7. member_update_end
      Triggered at the end of member update.
    8. cp_members_validate_members
      Triggered to validate members in the control panel.
    9. member_register_validate_members
      Triggered to validate members during registration.
    Usage Tips
    • Customization: Use these hooks to add custom functionality or modify existing behavior without altering core code.
    • Order of Execution: Be aware of the order in which hooks are triggered to ensure proper functionality.
    • Documentation: Refer to the plugin’s documentation for specifics on how to use each hook effectively.

    These hooks provide flexibility and control over various aspects of plugin behavior, allowing for customization and enhanced functionality.

    Form Hooks

    • sm_build_form_start
      Purpose: Called when a form starts building. Allows modification of data before form generation. Parameters: Source (e.g., "registration"), Total Fields (array of possible fields). Return: Modified array of fields.
    • sm_build_form_end
      Purpose: Called at the end of form building, before replacing data with tag data. Parameters: Source (e.g., "registration"), Variable Array (array of form parameters). Return: Modified variable array.
    • sm_submit_form_start
      Purpose: Called when a form is submitted, before validation. Parameters: Source (e.g., "registration"), Parameter Array (array passed in the form loop). Return: Modified parameter array.
    • sm_submit_form_end
      Purpose: Called when a form is submitted without errors and data is updated in the database. Parameters: Source (e.g., "registration"), Return URL. Return: Return URL.
    • sm_error_in_form
      Purpose: Called when errors are found in submitted form data. Parameters: Source (e.g., "registration"), Array of Errors. Return: Array of errors.
    • sm_outer_error
      Purpose: Called if an error occurs and {error:xyz} is missing in the form (only with error_reporting="inline"). Parameters: Source (e.g., "registration"), Array of Errors. Return: Array of errors.
    • sm_init_validation
      Purpose: Called before initializing the validation array to fields. Allows modification of validation rules. Parameters: Source (e.g., "registration"), Array of Validation Settings. Return: Modified array of validation settings.

    Profile Hooks

    • sm_view_profile_start
      Purpose: Called when triggering the {exp:smsp:profile} tag. Parameters: None. Return: None.
    • sm_view_profile_end
      Purpose: Called before profile data is replaced with tag data. Parameters: Array of Member Data. Return: Modified array of member data.
    • sm_before_send_email
      Purpose: Called before sending any email (e.g., registration, forgot password). Parameters: Source (e.g., "registration"), Array of Validation Settings. Return: Modified array of validation settings.
    • sm_total_fields
      Purpose: Constructor hook providing all possible fields in a form or profile. Parameter: Array of Total Fields. Return: Array of all possible fields.

    Social Login Hooks

    • sm_before_social_login (Pro Feature)
      Purpose: Called before social login API call. Parameter: URL for social site authentication. Return: Modified URL for social site authentication.
    • sm_after_social_login (Pro Feature)
      Purpose: Called after successful social login. Parameter: URL to redirect to after successful authentication. Return: Redirect URL.

    Data Import Hooks

    • sm_element_before_import (Pro Feature [EE4 >= v2.0.3])
      Purpose: Called just before member data is inserted or updated in the database. Parameter: Full Array of data to be inserted/updated. Return: Modified array.
    • sm_element_after_import (Pro Feature [EE4 >= v2.0.3])
      Purpose: Called just after member data is saved in the database. Parameters: Full Array of data saved in the database, Member ID. Return: None.

    These hooks allow you to customize and extend the functionality of forms, profile views, and other actions within the Smart Members plugin, ensuring you can tailor the behavior to fit your specific needs.

    Dashboard - Overview

    1. Initial Setup Links

    • [Link 1]: Description of the initial setup link.
    • [Link 2]: Description of the initial setup link.
    • [Link 3]: Description of the initial setup link.

    2. Essential Links

    • [Link A]: Description of the essential link.
    • [Link B]: Description of the essential link.
    • [Link C]: Description of the essential link.

    3. Reports

    Sales and Revenue

    Description: Overview of total sales and revenue generated. Includes charts and graphs for detailed analysis.

    Membership Stats

    Description: Insights into membership numbers, growth trends, and active members.

    Visits

    Description: Data on website or system visits, including user activity and engagement metrics.

    View and Login

    Description: Statistics on user views and login activity, including peak times and user demographics.

    Recent Orders

    Description: List of recent orders with status updates, including order ID, customer details, and order amounts.

    Orders - Overview

    The Orders section provides a comprehensive list of all orders, allowing you to perform basic operations such as editing, copying, deleting, and emailing orders. You can also add new orders and export the entire orders dataset into a CSV file.

    1. Orders List

    Basic Operations:
    • Edit: Modify the details of an existing order.
    • Copy: Create a duplicate of the selected order.
    • Delete: Remove the order from the list.
    • Email: Send order details via email.
    • Export Data: Export all orders into a CSV file.

    2. Add New Order

    To add a new order, click the “Add New Order” button. Fill out the following fields to complete the order setup:

    • ID: The ID will be automatically generated upon saving the order.
    • Code: A unique code generated randomly for the order.
    • Membership Level ID: Membership level ID assigned when the membership level is created.
    • Billing Details:
      • Billing Name: Name of the person being billed.
      • Billing Street: Street address for billing.
      • Billing City: City of the billing address.
      • Billing State: State of the billing address.
      • Billing Postal Code: Postal code for the billing address.
      • Billing Country: Country of the billing address.
      • Billing Phone: Phone number associated with the billing address.
    • Sub Total: Total amount before tax and discounts.
    • Tax: Tax amount based on location or other factors.
    • Total: Total amount calculated as Subtotal + Tax - Coupon Amount.
    • Payment Type: Payment method used (e.g., PayPal Express, PayPal Standard, Credit Card).
    • Card Type: Type of card used (e.g., Visa, MasterCard, AMEX).
    • Account Number: Bank account number (obscure all but the last 4 digits).
    • Expiration Month: Month when the card expires.
    • Expiration Year: Year when the card expires.
    • Status: Current status of the order (e.g., Cancelled, Error, Pending, Refunded, Review, Success, Token).
    • Gateway: Payment gateway used (e.g., Stripe, PayPal, Authorize.net).
    • Gateway Environment: Payment gateway environment (Testing or Sandbox).
    • Payment Transaction ID: ID generated by the payment gateway for cross-referencing orders.
    • Subscription Transaction ID: ID generated by the payment gateway for cross-referencing subscriptions.
    • Date: Date generated by the gateway for reference.
    • Notes: Additional notes or information related to the order.
    • Save: Save the order after completing all required fields.

    Subscribed Users - Overview

    The Subscribed Users section displays all users who have purchased a subscription. You can view detailed information about each subscription by clicking the eye icon in the manage column of the table.

    1. Subscribed Users List

    Description: This list provides an overview of all users who have an active subscription.

    Manage Column:
    • Eye Icon: Click on the eye icon to view detailed information about the subscription for each user.

    Subscription Settings - Overview

    The Subscription Settings section allows you to customize settings for Subscription Plans, Discount Codes, Payment Gateways, Emails, and other advanced settings as per your requirements. Under this setting, you can create and manage subscriptions and discount codes.

    Subscription Settings

    Plan Management

    View and manage all subscription plans created by the site owner. You can edit, copy, or delete existing plans.

    Add New Plan

    Click on the “Add New” button to create a new plan. Fill out the following details:

    • Name: The name of your membership level (public).
    • Description: Optional content shown on the checkout page.
    • Confirmation Message: Optional content shown on the checkout confirmation page.
    • Billing Details:
      • Initial Payment: The amount charged at checkout (e.g., $10).
      • Recurring Subscription: Check if the level has a recurring payment.
      • Billing Amount: Amount billed per cycle (day(s), week(s), month(s), year(s)) after the initial payment.
      • Billing Cycle: Total number of recurring billing cycles, including the trial period (if applicable). Set to zero for indefinite membership.
      • Custom Trial: Check if there is a custom trial period (Optional; Trial Payment and Trial Period).
      • Trial Billing Amount: Amount (can be zero for free trial) and number of cycles billed (day(s), week(s), month(s), year(s)) after the initial payment.
    • Other Settings:
      • Disable New Signups: Disables new signups and hides the level from the default page.
    • Content Settings:
      • Channels: Select the channels for which this plan has been created.
      • Member Groups: Select the member groups for which this plan has been created.
      • Categories: Select the categories for which this plan has been created.
    • Save Plan: Click on the “Save” button to save the new plan.

    Discount Codes - Overview

    This section allows you to manage all discount codes created by the site owner for users. You can edit, copy, or delete existing discount codes.

    Add New Discount Code

    Click on the “Add New Discount Code” button to create a new discount code. Fill out the following fields:

    • Code: The discount code that users will enter.
    • Amount: The amount or percentage off that the discount code provides.
    • Expiration Date: The date after which the discount code will no longer be valid.
    • Usage Limit: The maximum number of times the discount code can be used.
    • Save: Click on the “Save” button to save the new discount code.

    Payment Gateway - Overview

    The Payment Gateway section allows you to set up and manage various payment gateways for processing payments. You can enable, disable, and configure settings for different payment methods.

    Payment Gateways List

    • Gateway Name 1: Description and settings for Gateway 1.
    • Gateway Name 2: Description and settings for Gateway 2.

    Security - Overview

    The Security section provides settings for managing security features such as two-factor authentication, password policies, and security logs.

    Security Settings

    • Two-Factor Authentication: Enable or disable two-factor authentication for users.
    • Password Policy: Set password complexity requirements for users.
    • Security Logs: View logs of security events and user activities.

    Email - Overview

    The Email section allows you to customize email templates and settings for notifications sent to users. You can edit, preview, and test email templates.

    Email Templates

    • Welcome Email: Template for the welcome email sent to new users.
    • Order Confirmation: Template for confirming orders with users.

    Advanced Settings - Overview

    The Advanced Settings section allows for detailed configurations of system settings, including custom scripts, advanced user roles, and other advanced features.

    Advanced Settings

    The Advanced Settings admin page allows you to control additional customization settings for your site.

    Field Description and Uses

    Use reCAPTCHA?

    Requiring a credit card is the best spam prevention method. However, if you offer a free membership level, you can enable reCAPTCHA to enhance spam prevention in addition to the plugin’s built-in features.

    Basic Settings

    The Basic Settings page allows you to customize plugin settings according to your requirements. The form is user-friendly, and the settings will affect every module used on the frontend.

    1. Use Email Address as Username

    This field allows you to use the same value for both the username and email fields. By selecting "Yes," the email field will no longer be required on the registration page. You will only need the username field, which will be set to accept email addresses exclusively.

    Example:

    <input type="email" name="username" placeholder="Email Address">
    {error:username} <!-- for inline error reporting --><

    Note: The input type is set to "email" while the name of the input remains "username". This behavior is consistent in the profile edit module as well.

    a2. Email Template for New Registrations

    You have two options for configuring email templates for registrations and forgotten passwords:

    • Option 1: Use the backend setting form to define the email template.
    • Option 2: Generate custom email templates from the frontend.

    If you choose the frontend template option, you must select the templates from the frontend.

    3. Screen Name Override

    This setting allows you to use any custom field as the screen name during registration. The field chosen will replace the screen name.

    Important: The screen name must be unique. If the custom field's value already exists as a screen name for another user, the default screen name will be used instead of the override.

    4. Enable ReCAPTCHA?

    Enabling ReCAPTCHA requires you to provide the Google ReCAPTCHA key and secret, which can be generated from the Google ReCAPTCHA site.

    After generating the key and secret, you can implement ReCAPTCHA in the front-end module by passing enable_recaptcha="yes" in the parameters and adding the following code in the template:

    {if captcha}

    {captcha} {error:captcha}

    {if:elseif recaptcha}

    {recaptcha} {error:recaptcha}

    {/if}

    If you enable ReCAPTCHA but do not provide the API key and secret in the backend, the standard CAPTCHA will be displayed as a fallback.

    a2. Email Template for New Registrations

    You have two options for configuring email templates for registrations and forgotten passwords:

    • Option 1: Use the backend setting form to define the email template.
    • Option 2: Generate custom email templates from the frontend.

    If you choose the frontend template option, you must select the templates from the frontend.

    3. Screen Name Override

    This setting allows you to use any custom field as the screen name during registration. The field chosen will replace the screen name.

    Important: The screen name must be unique. If the custom field's value already exists as a screen name for another user, the default screen name will be used instead of the override.

    4. Enable ReCAPTCHA?

    Enabling ReCAPTCHA requires you to provide the Google ReCAPTCHA key and secret, which can be generated from the Google ReCAPTCHA site.

    After generating the key and secret, you can implement ReCAPTCHA in the front-end module by passing enable_recaptcha="yes" in the parameters and adding the following code in the template:

    {if captcha}
    {if:elseif recaptcha}

    {recaptcha} {error:recaptcha}

    {/if}

    If you enable ReCAPTCHA but do not provide the API key and secret in the backend, the standard CAPTCHA will be displayed as a fallback.

    5. Email Template Settings

    If you select the default email template option for new registrations, you will need to define the email settings at the bottom of the form. If using custom templates, only the selection of templates is required.

    Email Template (View)

    Configure and customize email templates for various functions within the Smart Members Subscription PRO plugin. This section allows you to view and adjust the templates used for member registration and other notifications. Ensure that your email templates are aligned with your site's branding and communication style.

    Member Preferences

    • EE2 Users: In ExpressionEngine 2 (EE2), member preferences settings include options for static images such as Photo files and Signature Images. Users can adjust the path, height, width, and other parameters for these fields.
    • EE3 Users: The setting forms for static image preferences are not yet available in ExpressionEngine 3 (EE3). However, you can still adjust settings for photo files, avatars, and signature images from the provided module.

    Social Settings

    • Overview: Social Login allows users to log in using their social media accounts. This feature supports login via popular platforms such as Facebook, Twitter, Google, and 20 other social sites.
    • Social Settings List Page:

    Callback URL

    Callback URL Configuration:

    • Testing the Link: To ensure the callback URL is working correctly, click the TEST button on the right. This will verify the link's functionality.
    • Success Message: If the test is successful, you will see a confirmation page indicating that the callback URL is correctly configured.

    If the test fails, please check the link path to ensure it is accurate and properly configured.

    Social Settings Form

    Available Social Sites:

    • Facebook
    • Twitter
    • Google
    • Live
    • Yahoo
    • Foursquare
    • GitHub
    • px500
    • BitBucket
    • Disqus
    • Dribbble
    • Dropbox
    • GitLab
    • Instagram
    • LastFM
    • MailChimp
    • Slack
    • SoundCloud
    • Vimeo
    • Tumblr

    Facebook Social Login Setup

    To activate the Facebook login method in the Social Login settings, follow these steps:

    1. Generate Application ID and Application Secret:
    2. Enter Callback URL in API Form:
      • You have the option to use either a Default Callback URL or a Custom Callback URL.

    The Facebook API requires the exact callback URL with a specific parameter. For example, if your callback URL is http://www.example.com/?ACT=85, your Facebook callback URL should be formatted as:
    ruby
    Copy code
    http://www.example.com/?ACT=85&hauth.done=Facebook

    • Ensure the callback URL provided matches the one used in the Facebook API settings.
    1. Configure Facebook Settings in Smart Members Subscription PRO:
      • Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the Facebook settings section.
    2. Enter Your Application ID and Secret:
      • Input the Application ID and Application Secret that you generated in the respective fields.
      • Select the callback URL you used in the API setup.
    3. Save the Settings:
      • Click the Save button to apply the changes.

    Twitter Social Login Setup

    To activate the Twitter login method in the Social Login settings, follow these steps:

    1. Generate Consumer Key and Consumer Secret:
      • Go to the Twitter Developer Apps page.
      • Follow the instructions to generate your Consumer Key and Consumer Secret.
    2. Enter Callback URL in API Form:
      • You can use either a Default Callback URL or a Custom Callback URL based on your needs.
    3. Configure Twitter Settings in Smart Members Subscription PRO:
      • Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the Twitter settings section.
    4. Enter Your Consumer Key and Consumer Secret:
      • Input the Consumer Key and Consumer Secret that you generated in the respective fields.
      • Select the callback URL you used in the API setup.
    5. Save the Settings:
      • Click the Save button to apply the changes.

    Google Social Login Setup

    To activate Google login method in the Social Login settings, follow these steps:

    1. Generate Client ID and Client Secret:
      • Visit the Google Developers Console.
      • Create a new project or select an existing project.
      • Navigate to Credentials and generate your Client ID and Client Secret.
    2. Enter Callback URL in API Form:
      • You can choose between a Default Callback URL or a Custom Callback URL.

    The Google API requires an exact callback URL with a specific parameter. For example, if your callback URL is http://www.example.com/?ACT=85, your Google callback URL should be:
    ruby
    Copy code
    http://www.example.com/?ACT=85&hauth.done=Google

    1. Configure Google Settings in Smart Members Subscription PRO:
      • Go to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the Google settings section.
    2. Enter Your Client ID and Client Secret:
      • Input the Client ID and Client Secret that you generated in the respective fields.
      • Select the callback URL you have used in the API setup.
    3. Save the Settings:
      • Click the Save button to apply the changes.

    Live Social Login Setup

    To activate Live login method in the Social Login settings, follow these steps:

    1. Generate Client ID and Client Secret:
    2. Enter Callback URL in API Form:
      • You can use either a Default Callback URL or a Custom Callback URL based on your requirements.
    3. Configure Live Settings in Smart Members Subscription PRO:
      • Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the Live settings section.
    4. Enter Your Client ID and Client Secret:
      • Input the Client ID and Client Secret that you generated in the respective fields.
      • Select the callback URL you used in the API setup.
    5. Save the Settings:
      • Click the Save button to apply the changes.

    Yahoo Social Login Setup

    To activate Yahoo login method in the Social Login settings, follow these steps:

    1. Generate Client ID and Client Secret:
      • Visit the Yahoo Developer Network page.
      • Create a new application or select an existing one.
      • Generate your Client ID and Client Secret.
    2. Enter Callback URL in API Form:
      • You can choose between a Default Callback URL or a Custom Callback URL based on your needs.
    3. Configure Yahoo Settings in Smart Members Subscription PRO:
      • Go to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the Yahoo settings section.
    4. Enter Your Client ID and Client Secret:
      • Input the Client ID and Client Secret that you generated in the respective fields.
      • Select the callback URL you used in the API setup.
    5. Save the Settings:
      • Click the Save button to apply the changes.

    Foursquare Social Login Setup

    To activate Foursquare login method in the Social Login settings, follow these steps:

    1. Generate Client ID and Client Secret:
      • Go to the Foursquare Developer Apps page.
      • Create a new application or select an existing one.
      • Generate your Client ID and Client Secret.
    2. Enter Callback URL in API Form:
      • Choose between a Default Callback URL or a Custom Callback URL based on your needs.
    3. Configure Foursquare Settings in Smart Members Subscription PRO:
      • Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the Foursquare settings section.
    4. Enter Your Client ID and Client Secret:
      • Input the Client ID and Client Secret that you generated in the respective fields.
      • Select the callback URL you used in the API setup.
    5. Save the Settings:
      • Click the Save button to apply the changes.

    GitHub Social Login Setup

    To activate GitHub login method in the Social Login settings, follow these steps:

    1. Generate Client ID and Client Secret:
    2. Enter Callback URL in API Form:
      • Choose either a Default Callback URL or a Custom Callback URL based on your requirements.
    3. Configure GitHub Settings in Smart Members Subscription PRO:
      • Navigate to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the GitHub settings section.
    4. Enter Your Client ID and Client Secret:
      • Input the Client ID and Client Secret that you generated in the respective fields.
      • Select the callback URL you used in the API setup.
    5. Save the Settings:
      • Click the Save button to apply the changes.

    500px Social Login Setup

    To activate 500px login method in the Social Login settings, follow these steps:

    1. Generate Customer ID and Customer Secret:
    2. Enter Callback URL in API Form:
      • You can use either a Default Callback URL or a Custom Callback URL based on your needs.
    3. Configure 500px Settings in Smart Members Subscription PRO:
      • Go to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the 500px settings section.
    4. Enter Your Customer ID and Customer Secret:
      • Input the Customer ID and Customer Secret that you generated in the respective fields.
      • Select the callback URL you used in the API setup.
    5. Save the Settings:
      • Click the Save button to apply the changes.

    BitBucket Social Login Setup

    To activate BitBucket login method in the Social Login settings, follow these steps:

    1. Generate Customer Key and Customer Secret:
    2. Enter Callback URL in API Form:
      • You can choose either a Default Callback URL or a Custom Callback URL based on your requirements.
    3. Configure BitBucket Settings in Smart Members Subscription PRO:
      • Go to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the BitBucket settings section.
    4. Enter Your Customer Key and Customer Secret:
      • Input the Customer Key and Customer Secret that you generated in the respective fields.
      • Select the callback URL you used in the API setup.
    5. Save the Settings:
      • Click the Save button to apply the changes.

    Disqus Social Login Setup

    To activate the Disqus login method in the Social Login settings, follow these steps:

    1. Generate Public Key and Secret Key:
    2. Enter Callback URL in API Form:
      • You can use either a Default Callback URL or a Custom Callback URL based on your needs.
    3. Configure Disqus Settings in Smart Members Subscription PRO:
      • Go to the Social Settings page in the Smart Members Subscription PRO plugin.
      • Edit the Disqus settings section.
    4. Enter Your Public Key and Secret Key:
      • Input the Public Key and Secret Key that you generated in the respective fields.
      • Select the callback URL you used in the API setup.
    5. Save the Settings:
      • Click the Save button to apply the changes.

    Dropbox

    To activate Dropbox method in Social Login settings:

    1. Generate App Key and App Secret:
      From this link.
    2. Enter Callback URL in API Form:
      You can enter Default Callback URL or Custom Callback URL as per your need.
    3. Configure Dropbox Settings in Smart Members Subscription PRO:
      Go to the Social Settings page in Smart Members Subscription PRO and Edit Dropbox settings.
    4. Enter Your App Key and App Secret:
      Input the App Key and App Secret that you generated in the respective fields.
      Select the callback URL you used in the API setup.
    5. Save the Settings.

    GitLab

    To activate GitLab method in Social Login settings:

    1. Generate Application ID and Application Secret:
      From this link.
    2. Enter Callback URL in API Form:
      You can enter Default Callback URL or Custom Callback URL as per your need.
    3. Configure GitLab Settings in Smart Members Subscription PRO:
      Go to the Social Settings page in Smart Members Subscription PRO and Edit GitLab settings.
    4. Enter Your Application ID and Application Secret:
      Input the Application ID and Application Secret that you generated in the respective fields.
      Select the callback URL you used in the API setup.
    5. Save the Settings.

    Instagram

    To activate the Instagram method in Social Login settings:

    1. Generate Client ID and Client Secret:
      From this link.
    2. Enter Callback URL in API Form:
      You can enter Default Callback URL or Custom Callback URL as per your need.
    3. Configure Instagram Settings in Smart Members Subscription PRO:
      Go to the Social Settings page in Smart Members Subscription PRO and Edit Instagram settings.
    4. Enter Your Client ID and Client Secret:
      Input the Client ID and Client Secret that you generated in the respective fields.
      Select the callback URL you used in the API setup.
    5. Save the Settings.

    LastFM

    To activate LastFM method in Social Login settings:

    1. Generate API Key and Shared Secret:
      From this link.
    2. Enter Callback URL in API Form:
      You can enter Default Callback URL or Custom Callback URL as per your need.
    3. Configure LastFM Settings in Smart Members Subscription PRO:
      Go to the Social Settings page in Smart Members Subscription PRO and Edit LastFM settings.
    4. Enter Your API Key and Shared Secret:
      Input the API Key and Shared Secret that you generated in the respective fields.
      Select the callback URL you used in the API setup.
    5. Save the Settings.

    MailChimp

    To activate MailChimp method in Social Login settings:

    1. Generate Client ID and Client Secret:
      From this link.
    2. Enter Callback URL in API Form:
      You can enter Default Callback URL or Custom Callback URL as per your need.
    3. Configure MailChimp Settings in Smart Members Subscription PRO:
      Go to the Social Settings page in Smart Members Subscription PRO and Edit MailChimp settings.
    4. Enter Your Client ID and Client Secret:
      Input the Client ID and Client Secret that you generated in the respective fields.
      Select the callback URL you used in the API setup.
    5. Save the Settings.

    Slack

    To activate the Slack method in Social Login settings:

    1. Generate Client ID and Client Secret:
      From this link.
    2. Enter Callback URL in API Form:
      You can enter Default Callback URL or Custom Callback URL as per your need.
    3. Configure Slack Settings in Smart Members Subscription PRO:
      Go to the Social Settings page in Smart Members Subscription PRO and Edit Slack settings.
    4. Enter Your Client ID and Client Secret:
      Input the Client ID and Client Secret that you generated in the respective fields.
      Select the callback URL you used in the API setup.
    5. Save the Settings.

    SoundCloud

    To activate SoundCloud method in Social Login settings:

    1. Generate Client ID and Client Secret:
      From this link.
    2. Enter Callback URL in API Form:
      You can enter Default Callback URL or Custom Callback URL as per your need.
    3. Configure SoundCloud Settings in Smart Members Subscription PRO:
      Go to the Social Settings page in Smart Members Subscription PRO and Edit SoundCloud settings.
    4. Enter Your Client ID and Client Secret:
      Input the Client ID and Client Secret that you generated in the respective fields.
      Select the callback URL you used in the API setup.
    5. Save the Settings.

    Vimeo

    To activate Vimeo method in Social Login settings:

    1. Generate Client ID and Client Secret:
      From this link.
    2. Enter Callback URL in API Form:
      You can enter Default Callback URL or Custom Callback URL as per your need.
    3. Configure Vimeo Settings in Smart Members Subscription PRO:
      Go to the Social Settings page in Smart Members Subscription PRO and Edit Vimeo settings.
    4. Enter Your Client ID and Client Secret:
      Input the Client ID and Client Secret that you generated in the respective fields.
      Select the callback URL you used in the API setup.
    5. Save the Settings.

    Tumblr

    To activate Tumblr method in Social Login settings:

    1. Generate OAuth Consumer Key and OAuth Consumer Secret:
      From this link.
    2. Enter Callback URL in API Form:
      You can enter Default Callback URL or Custom Callback URL as per your need.
    3. Configure Tumblr Settings in Smart Members Subscription PRO:
      Go to the Social Settings page in Smart Members Subscription PRO and Edit Tumblr settings.
    4. Enter Your OAuth Consumer Key and OAuth Consumer Secret:
      Input the OAuth Consumer Key and OAuth Consumer Secret that you generated in the respective fields.
      Select the callback URL you used in the API setup.
    5. Save the Settings.

    Member Fields

    ExpressionEngine traditionally supports limited member field types such as Text Input, Textarea, and Select Dropdown for custom member fields. To enhance functionality, new custom member fields have been introduced:

    • Multi Select Box
    • Radio Buttons
    • Checkboxes
    • File Fields

    Member Fields Setting List Page: Image

    Create Field Form: Image

    Export Members

    You can now export members with selected fields, filtered by Groups. The exports are available in both CSV and XML formats. These exports can be saved for future use and can be generated from outside the admin panel with auto-generated links.

    Export Member List Page:Image

    Download, Edit, or Delete Exports:

    • You can download, edit, or delete exports from this page.
    • External URL links for downloads will be shown as pop-ups.
    • Security measures are in place for downloads:
      • Private exports require login to download.
      • Public exports can be downloaded by anyone logged in.
      • To allow downloads without login, set “Access export URL without Login?” to YES.

    Popup URL to Download Export Outside of EE: Image

    Generate Export Form:

    Import Members

    Members can be imported with selected fields and filtration options such as same email, member ID, screen name, and unique field sanitization. Imports can be done using CSV and XML files from server paths or URLs. Imports can also be managed and used from outside the admin panel with auto-generated links.

    Import Members List Page: Image

    Run, Edit, or Delete Imports:

    • You can run, edit, or delete imports from this page.
    • External URL links for imports will be shown as pop-ups.
    • Security measures are in place for imports:
      • Private imports require login to run.
      • Public imports can be run by anyone logged in.
      • To allow imports without login, set “Access import URL without Login?” to YES.

    Import Member Choose Fields: Image

    Registration

    The Registration module handles user registration on your site according to the settings specified in member preferences and plugin settings.

    Tag for Registration Module:

    html

    Copy code

    {exp:smsp:register} 

    Content data 

    {/exp:smsp:register}

    Please refer to the provided images and links for visual reference and more detailed instructions.

    Fields

    1. group_id
    2. username
    3. email
    4. password
    5. password_confirm
    6. avatar_filename
    7. photo_filename
    8. sig_img_filename
    9. yahoo_im
    10. url
    11. location
    12. occupation
    13. interests
    14. aol_im
    15. msn_im
    16. icq
    17. bio
    18. signature
    19. captcha
    20. CUSTOM_FIELD
    21. CUSTOM_CHECKBOX_FIELD (Pro Feature)
    22. CUSTOM_RADIO_FIELD (Pro Feature)
    23. CUSTOM_MULTI_SELECT_FIELD (Pro Feature)
    24. CUSTOM_FILE_FIELD (Pro Feature)

    Following Parameters can be used in Registration Form

    group_id
    Group id of member groups to put the member in any specific group.
    Example:
    group_id = “5”

    allowed_groups
    Allowed groups parameter is used to give options to members to select any group from them. Use input field of group_id to enter the group id from defined allowed groups.
    Example:
    allowed_groups = “5|6|7”

    rule

    Rule parameter is used to give custom rules to fields separated by pipe (|).

    Example:

    rule:username = “required”

    rule:email = “required|valid_email|is_unique[members.email]”

    attr

    Parameter to add attributes in the form. We can add classes, ids, etc.

    Example:

    attr:id = “form_id”

    attr:class = “form_class”

    attr:name = “form_name”

    attr:data-id = “form_data_id”

    return
    Return to any specific page after successful submission of the form.
    Example:
    return = “smart-members/profile”

    error_reporting
    Error reporting format is defined by this parameter. It can be either “inline” or “outline”.
    Example:
    error_reporting=”inline”

    wrap_errors
    Use this parameter to wrap form errors in any span or div if error_reporting=”inline”.
    Example:
    wrap_errors=”<span class=’error-inline’>|</span>”

    on_submit
    This parameter allows us to call any JavaScript function on form submission.
    Example:
    on_submit=”call_me( )”

    secure_action
    Secure action will post the data on a secure site (i.e., https).
    Example:
    secure_action=”yes”

    secure_return
    Secure return will return the page after form submission on a secure site (i.e., https).
    Example:
    secure_return=”yes”

    enable_recaptcha
    This parameter enables reCAPTCHA instead of the normal captcha.

    • Scenario EE2:
      • If this parameter is set and API key and SECRET are not passed for reCAPTCHA in the backend, the normal captcha will show.
      • If reCAPTCHA API key and SECRET are passed in the backend and this parameter is not set:
        • If the page is a registration page and captcha is required from member preferences, normal captcha will show.
        • If the page is not a registration page, neither captcha nor reCAPTCHA will show.
      • If reCAPTCHA API key and SECRET are passed in the backend and this parameter is set:
        • If the page is a registration page and captcha is required from member preferences, normal captcha will not show and reCAPTCHA will override the settings.
        • If the page is not a registration page, reCAPTCHA will show.
    • Scenario EE3:
      • Same scenario as EE2. The only change is that there is backend member preference settings in EE3 that allow not entering any captcha if the member is logged in. So if you set this parameter and API key and SECRET are also passed, if you are logged in, this reCAPTCHA or captcha will not show until you set “Require CAPTCHA while logged in?” to “Yes” from backend member settings > captcha settings.
        Example:
        enable_recaptcha=”yes”

    Different Methods That Can Be Used by User

    Input

    html

    Copy code

    <input type="email" name="username" placeholder="Email Address">

    {error:username} //if error_reporting=”inline”

    Textarea

    html

    Copy code

    <textarea name="signature"></textarea>

    {error:signature} //if error_reporting=”inline”

    Default File Field (Avatar, Photo, and Signature files)

    html

    Copy code

    <input type="file" name="avatar_filename" />

    {error:avatar_filename} //if error_reporting=”inline”

    Select Dropdown (For Member Group)

    html

    Copy code

    {data_group_id}

    {if data_group_id:count == 1}

    <select name="group_id">

    <option value=""></option>

    {/if}

    <option value="{group_id_value}"> {group_id_label}</option>

    {if data_group_id:count == data_group_id:total_results}

    </select>

    {error:group_id} //if error_reporting=”inline”

    {/if}

    {/data_group_id}

    Select Dropdown (For Custom Field)

    html

    Copy code

    {data_CUSTOM_FIELD}

    {if data_CUSTOM_FIELD:count == 1}

    <select name="CUSTOM_FIELD">

    <option value=""></option>

    {/if}

    <option value="{CUSTOM_FIELD_value}"> {CUSTOM_FIELD_label}</option>

    {if data_CUSTOM_FIELD:count == data_CUSTOM_FIELD:total_results}

    </select>

    {error:CUSTOM_FIELD} //if error_reporting=”inline”

    {/if}

    {/data_CUSTOM_FIELD}

    Captcha

    html

    Copy code

    {if captcha}

    <p>

    <label for="captcha">Please enter the word you see:</label>

    {captcha}

    <input type="text" name="captcha" id="captcha" />

    {error:captcha}

    </p>

    {if:elseif recaptcha}

    <p style="margin: 0;">

    <label for="recaptcha">Click the checkbox</label>

    {recaptcha}

    {error:recaptcha}

    </p>

    {/if}

    Accept Terms

    html

    Copy code

    <input type="checkbox" name="accept_terms" value="y" /> Accept Terms?

    {error:accept_terms} //if error_reporting=”inline”

    CUSTOM_CHECKBOX_FIELD (Pro Feature)

    html

    Copy code

    {if data_CUSTOM_CHECKBOX_FIELD:count == 1}

    <p style="display: inline-flex;">

    {/if}

    <input type="checkbox" name="CUSTOM_CHECKBOX_FIELD[]" value="{CUSTOM_CHECKBOX_FIELD_value}" id="test_{data_CUSTOM_CHECKBOX_FIELD:count}" {if CUSTOM_CHECKBOX_FIELD_value:exists}checked{/if}>

    <label for="test_{data_CUSTOM_CHECKBOX_FIELD:count}">{CUSTOM_CHECKBOX_FIELD_label}</label>

    {if data_CUSTOM_CHECKBOX_FIELD:count == data_CUSTOM_CHECKBOX_FIELD:total_results}

    {error:CUSTOM_CHECKBOX_FIELD}

    </p>

    {/if}

    {/data_CUSTOM_CHECKBOX_FIELD}

    CUSTOM_RADIO_FIELD (Pro Feature)

    html

    Copy code

    {data_CUSTOM_RADIO_FIELD}

    {if data_CUSTOM_RADIO_FIELD:count == 1}

    <p style="display: inline-flex;">

    {/if}

    <input type="radio" name="CUSTOM_RADIO_FIELD" value="{CUSTOM_RADIO_FIELD_value}" id="test_{data_CUSTOM_RADIO_FIELD:count}" {if CUSTOM_RADIO_FIELD_value:exists}checked{/if}>

    <label for="test_{data_CUSTOM_RADIO_FIELD:count}">{CUSTOM_RADIO_FIELD_label}</label>

    {if data_CUSTOM_RADIO_FIELD:count == data_CUSTOM_RADIO_FIELD:total_results}

    {error:CUSTOM_RADIO_FIELD}

    </p>

    {/if}

    {/data_CUSTOM_RADIO_FIELD}

    CUSTOM_MULTI_SELECT_FIELD (Pro Feature)

    html

    Copy code

    {data_CUSTOM_MULTI_SELECT_FIELD}

    {if data_CUSTOM_MULTI_SELECT_FIELD:count == 1}

    <p style="display: inline-flex;">

    <select multiple name="CUSTOM_MULTI_SELECT_FIELD[]">

    {/if}

    <option value="{CUSTOM_MULTI_SELECT_FIELD_value}" {if CUSTOM_MULTI_SELECT_FIELD_value:exists}selected{/if}>{CUSTOM_MULTI_SELECT_FIELD_label}</option>

    {if data_CUSTOM_MULTI_SELECT_FIELD:count == data_CUSTOM_MULTI_SELECT_FIELD:total_results}

    </select>

    {error:CUSTOM_MULTI_SELECT_FIELD}

    </p>

    {/if}

    {/data_CUSTOM_MULTI_SELECT_FIELD}

    CUSTOM_FILE_FIELD (Pro Feature)

    html

    Copy code

    <p>

    Old file name: {CUSTOM_FILE_FIELD}<br>

    <input type="file" name="CUSTOM_FILE_FIELD">

    {error:CUSTOM_FILE_FIELD}

    </p>

    Example Registration Form

    html

    Copy code

    {exp:smsp:register

    allowed_groups="6|7|5"

    rule:username="required|valid_email|min_length[5]"

    rule:password="required|matches[password_confirm]|min_length[5]"

    rule:password_confirm="required|min_length[5]"

    rule:group_id="required"

    rule:state="required"

    rule:first_name="required"

    attr:id="registration_id"

    attr:class="registration_class"

    attr:name="registration-form"

    attr:data-id="registration_data_id_attr"

    return="smart-members/edit-profile"

    enable_recaptcha="yes"

    error_reporting="inline"

    wrap_errors="<span class='error-inline'>|</span>"

    on_submit="registration()"

    }

    <p>

    <input type="text" name="CUSTOM_FIELD" placeholder="CUSTOM FIELD">

    {error:CUSTOM_FIELD}

    </p>

    {data_group_id}

    {if data_group_id:count == 1}

    <p>

    <select name="group_id">

    <option value=""></option>

    {/if}

    <option value="{group_id_value}">{group_id_label}</option>

    {if data_group_id:count == data_group_id:total_results}

    </select>

    {error:group_id}

    </p>

    {/if}

    {/data_group_id}

    <p>

    <label for="accept_terms">Accept Terms?</label>

    <input type="checkbox" name="accept_terms" value="y" id="accept_terms">

    {error:accept_terms}

    </p>

    <p>

    <input type="file" name="avatar_filename">

    {error:avatar_filename}

    </p>

    <p>

    {captcha}

    <input type="text" name="captcha" placeholder="Enter the CAPTCHA">

    {error:captcha}

    </p>

    <p>

    <button type="submit">Register</button>

    </p>

    {/exp:smsp:register}

    Login Module Documentation

    The Login module allows members to log in using additional features provided by the plugin, including inline error reporting, reCAPTCHA, and options to log in with either a username or email address.

    Tag Syntax

    html

    Copy code

    {exp:smsp:login}

    <!-- Content data -->

    {/exp:smsp:login}

    Parameters

    1. allowed_groups
      Specifies which member groups are available for login. You can list group IDs separated by pipes (|).
      Example:
      allowed_groups="5|6|7"
    2. rule

      Defines custom validation rules for fields, separated by pipes (|).
      Example:
      rule:username="required|min_length[5]" rule:email="required|valid_email|is_unique[members.email]"
    3. attr

      Adds HTML attributes to the form, such as classes or IDs.
      Example:
      attr:id="form_id" attr:class="form_class" attr:name="form_name" attr:data-id="form_data_id"
    4. return
      Redirects to a specific page after successful login.
      Example:
      return="smart-members/profile"
    5. error_reporting
      Sets the format for error reporting. It can be either inline or outline.
      Example:
      error_reporting="inline"
    6. wrap_errors
      Wraps form errors in a specified HTML element if error_reporting="inline".
      Example:
      wrap_errors="<span class='error-inline'>|</span>"
    7. on_submit
      Calls a JavaScript function on form submission.
      Example:
      on_submit="login()"
    8. secure_action
      Posts data to a secure site (https).
      Example:
      secure_action="yes"
    9. secure_return
      Returns the page after form submission on a secure site (https).
      Example:
      secure_return="yes"
    10. enable_recaptcha
      Enables reCAPTCHA instead of the normal captcha.
      Example:
      enable_recaptcha="yes"

    Fields

    1. group_id
      ID of the group to which the member belongs.
    2. username
      Username for login.
    3. email
      Email address for login.
    4. password
      Password for login.
    5. auto_login
      Checkbox to remember the user for auto-login.
    6. captcha
      Captcha field for security verification.

    Example Login Form

    html

    Copy code

    {exp:smsp:login

    rule:username="required|min_length[5]"

    rule:password="required"

    allowed_groups="1|5|7"

    attr:id="login_id"

    attr:class="login_class"

    attr:name="login-form"

    attr:data-id="login_data_id_attr"

    return="/smart-members/edit-profile"

    error_reporting="inline"

    wrap_errors="<span class='error-inline'>|</span>"

    enable_recaptcha="yes"

    on_submit="login()"

    }

    {data_group_id}

    {if data_group_id:count == 1}

    <p>

    <select name="group_id">

    <option value=""></option>

    {/if}

    <option value="{group_id_value}">{group_id_label}</option>

    {if data_group_id:count == data_group_id:total_results}

    </select>

    {error:group_id}

    </p>

    {/if}

    {/data_group_id}

    <p>

    <input type="text" name="username" class="text required validate[required]" placeholder="Username or Email">

    {error:username}

    </p>

    <p>

    <input type="password" name="password" class="password text required validate[required]" placeholder="Password">

    {error:password}

    </p>

    {if captcha}

    <p>

    <label for="captcha">Please enter the word you see:</label>

    {captcha}

    <input type="text" name="captcha" id="captcha" />

    {error:captcha}

    </p>

    {if:elseif recaptcha}

    <p style="margin: 0;">

    <label for="recaptcha">Click the checkbox to complete the captcha process</label>

    {recaptcha}

    {error:recaptcha}

    </p>

    {/if}

    <p>

    <label for="auto_login">

    <input type="checkbox" name="auto_login" id="auto_login" value="y" /> Remember me?

    {error:auto_login}

    </label>

    </p>

    <div class="login-login-click cf">

    <input type="submit" class="login-popup-btn login" value="Login">

    </div>

    {/exp:smsp:login}

    Different Methods for User Input

    Input

    html

    Copy code

    <input type="text" name="username" placeholder="Email Address">

    {error:username} <!-- if error_reporting="inline" -->

    Select Dropdown (For Member Group)

    html

    Copy code

    {data_group_id}

    {if data_group_id:count == 1}

    <select name="group_id">

    <option value=""></option>

    {/if}

    <option value="{group_id_value}">{group_id_label}</option>

    {if data_group_id:count == data_group_id:total_results}

    </select>

    {error:group_id} <!-- if error_reporting="inline" -->

    {/if}

    {/data_group_id}

    Captcha

    html

    Copy code

    {if captcha}

    <p>

    <label for="captcha">Please enter the word you see:</label>

    {captcha}

    <input type="text" name="captcha" id="captcha" />

    {error:captcha}

    </p>

    {if:elseif recaptcha}

    <p style="margin: 0;">

    <label for="recaptcha">Click the checkbox to complete the captcha process</label>

    {recaptcha}

    {error:recaptcha}

    </p>

    {/if}

    Auto Login

    html

    Copy code

    <input type="checkbox" name="auto_login" value="y" /> Remember me?

    {error:auto_login} <!-- if error_reporting="inline" -->

    Social Login 

    The Social Login module allows users to log in or register on your site using their social media accounts. It supports various configurations for a seamless integration experience. Here’s a detailed breakdown of how you can use the Social Login module:

    Basic Tag Structure

    To use the Social Login module, you’ll use the following tag:

    html

    Copy code

    {exp:smsp:social_login} Content data {/exp:smsp:social_login}

    Parameters

    1. rule
      • Defines custom validation rules for fields, separated by pipes (|).
      • Example: rule:providers="required"
    2. attr
      • Adds attributes like classes or IDs to the form elements.
      • Example: attr:id="form_id"
    3. return
      • Specifies the URL to redirect to after a successful login.
      • Example: return="smart-members/profile"
    4. no_email_return
      • Redirects to a specific page if the social API does not return an email address.
      • Example: no_email_return="smart-members/member-form"
    5. error_reporting
      • Sets the error reporting format (inline or outline).
      • Example: error_reporting="inline"
    6. wrap_errors
      • Wraps error messages in a specified HTML element if using inline error reporting.
      • Example: wrap_errors="<span class='error-inline'>|</span>"
    7. on_submit
      • Calls a JavaScript function on form submission.
      • Example: on_submit="call_me()"
    8. secure_action
      • Posts the data over a secure connection (https).
      • Example: secure_action="yes"
    9. secure_return
      • Returns the page over a secure connection after form submission.
      • Example: secure_return="yes"
    10. enable_recaptcha
      • Enables reCAPTCHA instead of the normal CAPTCHA.
      • Example: enable_recaptcha="yes"
    11. popup
      • Determines whether the social login request is sent via a popup or not.
      • Example: popup="yes"
    12. remember_me
      • Allows users to save their session for longer.
      • Example: remember_me="yes"
    13. providers
      • Lists the social media providers available for login.
      • Example: providers="facebook|twitter|google"

    Fields

    • providers: The social media providers available for login.

    Example Implementation

    Here’s an example of how you might set up a Social Login form:

    html

    Copy code

    {exp:smsp:social_login

    providers="facebook|twitter|google"

    attr:id="sl_id"

    attr:class="sl_class"

    attr:name="sl-form"

    attr:data-id="sl_datta_id_attr"

    rule:providers="required"

    error_reporting="inline"

    wrap_errors="<span class='error-inline'>|</span>"

    on_submit="sl()"

    return="smart-members/profile"

    no_email_return="smart-members/edit-profile"

    remember_me="yes"

    secure_action="yes"

    secure_return="yes"

    enable_recaptcha="yes"

    popup="yes"

    }

    {providers}

    {if providers:count == 1}

    <p>

    <select name="providers">

    <option value=""></option>

    {/if}

    <option value="{provider_name}">{provider_label}</option>

    {if providers:count == providers:total_results}

    </select>

    {error:providers}

    </p>

    {/if}

    {/providers}

    <div class="login-register-click cf">

    <input type="submit" class="login-popup-btn register" value="Login With Social Media">

    </div>

    {/exp:smsp:social_login}

    Notes

    • Ensure you have configured the social login providers in your backend settings.
    • Adjust parameters based on your needs, such as whether to use reCAPTCHA or which providers to include.
    • Customize the form’s appearance using the attr parameters for classes and IDs.

    Edit Profile Form

    Overview

    The Edit Profile form allows members to update both static and custom profile data. Members can also modify their username, email, and password. While updating static and custom fields does not require the current password, changes to login-related fields (username, email, and password) require the current password to be entered.

    Form Tag

    The tag for the Edit Profile module is:

    html

    Copy code

    {exp:smsp:edit} Content data {/exp:smsp:edit}

    Parameters

    1. allowed_groups
      Specifies which member groups are allowed to use this form.
      Example: allowed_groups="5|6|7"
    2. rule

      Custom validation rules for fields, separated by a pipe (|).
      Example: rule:username="required"
      Example: rule:email="required|valid_email|is_unique[members.email]"
    3. attr

      Add HTML attributes to the form (e.g., classes, ids).
      Example: attr:id="form_id"
      Example: attr:class="form_class"
    4. return
      Redirects to a specified page after successful form submission.
      Example: return="smart-members/profile"
    5. error_reporting
      Determines the format of error reporting. Options are inline or outline.
      Example: error_reporting="inline"
    6. wrap_errors
      Wraps form errors in a specified HTML tag.
      Example: wrap_errors="<span class='error-inline'>|</span>"
    7. on_submit
      Calls a JavaScript function upon form submission.
      Example: on_submit="call_me()"
    8. secure_action
      Posts the form data over HTTPS if set to yes.
      Example: secure_action="yes"
    9. secure_return
      Redirects to a secure HTTPS page after form submission if set to yes.
      Example: secure_return="yes"
    10. enable_recaptcha
      Enables reCAPTCHA instead of normal captcha.
      Example: enable_recaptcha="yes"
    11. member_id
      Allows editing of another member’s profile by specifying their member ID.
      Example: member_id="25"
    12. allowed_admin_groups
      Restricts access to modify member data to specified admin groups.
      Example: allowed_admin_groups="1|6|7"

    Fields

    1. group_id
      Member group ID.
    2. username
      Member username.
    3. email
      Member email address.
    4. password
      New password.
    5. password_confirm
      Confirm new password.
    6. avatar_filename
      Avatar file upload.
    7. photo_filename
      Profile photo upload.
    8. sig_img_filename
      Signature image file upload.
    9. yahoo_im
      Yahoo Instant Messenger handle.
    10. url
      Website URL.
    11. location
      Member’s location.
    12. occupation
      Member’s occupation.
    13. interests
      Member’s interests.
    14. aol_im
      AOL Instant Messenger handle.
    15. msn_im
      MSN Instant Messenger handle.
    16. icq
      ICQ number.
    17. bio
      Short biography.
    18. signature
      Member’s signature.
    19. captcha
      Standard CAPTCHA field.
    20. CUSTOM_FIELD
      Custom field.
    21. CUSTOM_CHECKBOX_FIELD (Pro Feature)
      Custom checkbox field.
    22. CUSTOM_RADIO_FIELD (Pro Feature)
      Custom radio field.
    23. CUSTOM_MULTI_SELECT_FIELD (Pro Feature)
      Custom multi-select field.
    24. CUSTOM_FILE_FIELD (Pro Feature)
      Custom file upload field.

    Examples

    Basic Form Example

    html

    Copy code

    {exp:smsp:edit

    allowed_groups="6|7|5"

    rule:username="required|valid_email|min_length[5]"

    rule:password="required|matches[password_confirm]|min_length[5]"

    rule:password_confirm="required|min_length[5]"

    rule:group_id="required"

    attr:id="edit_profile_id"

    attr:class="edit_profile_class"

    return="smart-members/edit-profile"

    enable_recaptcha="yes"

    error_reporting="inline"

    wrap_errors="<span class='error-inline'>|</span>"

    on_submit="edit_profile()"

    }

    <p>

    <input type="text" name="CUSTOM_FIELD" placeholder="CUSTOM FIELD">

    {error:CUSTOM_FIELD}

    </p>

    {data_group_id}

    {if data_group_id:count == 1}

    <p>

    <select name="group_id">

    <option value=""></option>

    {/if}

    <option value="{group_id_value}" {if group_id_value == group_id}selected{/if}>

    {group_id_label}

    </option>

    {if data_group_id:count == data_group_id:total_results}

    </select>

    {error:group_id}

    </p>

    {/if}

    {/data_group_id}

    <p>

    <input type="text" name="username" value="{username}">

    {error:username}

    </p>

    <p>

    <input type="text" name="email" value="{email}">

    {error:email}

    </p>

    <p>

    <input type="password" name="current_password">

    {error:current_password}

    </p>

    <p>

    <input type="password" name="password">

    {error:password}

    </p>

    <p>

    <input type="password" name="password_confirm">

    {error:password_confirm}

    </p>

    <p>

    {if avatar_filename}

    <img src="{avatar_url}{avatar_filename}" height="100" width="100">

    {/if}

    <input type="file" name="avatar_filename">

    {error:avatar_filename}

    </p>

    {if captcha}

    <p>

    <label for="captcha">Please enter the word you see:</label>

    {captcha}

    <input type="text" name="captcha" id="captcha">

    {error:captcha}

    </p>

    {if:elseif recaptcha}

    <p style="margin: 0;">

    <label for="recaptcha">Click the checkbox</label>

    {recaptcha}

    {error:recaptcha}

    </p>

    {/if}

    <div class="edit-profile-click cf">

    <input type="submit" class="edit" value="Update Profile">

    </div>

    {/exp:smsp:edit}

    Remove Images from Edit Profile Form

    Members can remove their images (Avatar, Photo, Signature) using the "Edit Profile" form. You can remove these images in two ways:

    1. By Submitting the Form

    To remove images, use the following submit buttons in your form:

    Remove Avatar:
    html
    Copy code
    <input type="submit" name="remove_avatar" value="Remove Avatar">

    Remove Photo:
    html
    Copy code
    <input type="submit" name="remove_photo" value="Remove Photo">

    Remove Signature:
    html
    Copy code
    <input type="submit" name="remove_sig_img" value="Remove Signature">

    When the form is submitted with these buttons, the corresponding file entry will be removed. However, the image files will still exist in the image upload folder until a new image is uploaded.

    2. By Using Input Fields

    You can also use hidden inputs or radio buttons to remove images:

    Hidden Inputs:
    html
    Copy code
    <input type="hidden" name="remove_avatar">

    <input type="hidden" name="remove_photo">

    <input type="hidden" name="remove_sig_img">

    Radio Buttons:
    html
    Copy code
    <input type="radio" name="remove_avatar" value="remove"> Remove Avatar?<br>

    <input type="radio" name="remove_photo" value="remove"> Remove Photo?<br>

    <input type="radio" name="remove_sig_img" value="remove"> Remove Signature?<br>

    Example with jQuery

    Here’s how you can use jQuery to handle the removal of images:

    html

    Copy code

    {exp:smsp:edit

    return="smart-members/edit-profile"

    password_required="no"

    error_reporting="inline"

    wrap_errors="<span class='error-inline'>|</span>"

    }

    <p>

    {if avatar_filename}

    <div>

    <img src="{avatar_url}{avatar_filename}" height="100" width="100">

    <a href="javascript:void(0);" class="remove_sm_pic" add_field_attr="remove_avatar">

    Remove Avatar

    </a><br>

    </div>

    {/if}

    <input type="file" name="avatar_filename">

    {error:avatar_filename}

    </p>

    <p>

    {if photo_filename}

    <div>

    <img src="{photo_url}{photo_filename}" height="100" width="100">

    <a href="javascript:void(0);" class="remove_sm_pic" add_field_attr="remove_photo">

    Remove Photo

    </a><br>

    </div>

    {/if}

    <input type="file" name="photo_filename">

    {error:photo_filename}

    </p>

    <p>

    {if sig_img_filename}

    <div>

    <img src="{sig_img_url}{sig_img_filename}" height="100" width="100">

    <a href="javascript:void(0);" class="remove_sm_pic" add_field_attr="remove_sig_img">

    Remove Signature

    </a><br>

    </div>

    {/if}

    <input type="file" name="sig_img_filename">

    {error:sig_img_filename}

    </p>

    <div class="login-edit-click cf">

    <input type="submit" value="Update Account Information">

    </div>

    {/exp:smsp:edit}

    <script type="text/javascript">

    $(document).ready(function() {

    $(document).on('click', '.remove_sm_pic', function(event) {

    event.preventDefault();

    var fieldAttr = $(this).attr('add_field_attr');

    if (fieldAttr) {

    var inputField = $(this).parent('div').find("input[name='" + fieldAttr + "']");

    if (inputField.length == 0) {

    $(this).parent('div').hide();

    $(this).parent('div').append("<input type='hidden' name='" + fieldAttr + "'>");

    }

    } else {

    console.log('Cannot remove');

    }

    });

    });

    </script>

    View Profile Module

    The View Profile module is used to display the member's data on your website. This module allows you to access and display various details of the members, except for their passwords.

    Basic Usage

    To use the View Profile module, the tag should be written as follows:

    html

    Copy code

    {exp:smsp:profile}

    Content data

    {/exp:smsp:profile}

    Parameters

    Here’s a breakdown of the parameters you can use with the View Profile module:

    member_id
    Displays the profile of a specific member identified by the member_id.
    html
    Copy code
    {exp:smsp:profile member_id="123"}

    group_id
    Shows profiles of members belonging to a specific group identified by the group_id.
    html
    Copy code
    {exp:smsp:profile group_id="10"}

    not_member_id
    Excludes profiles of members with the specified member_id from the output.
    html
    Copy code
    {exp:smsp:profile not_member_id="123"}

    not_group_id
    Excludes profiles of members belonging to the specified group identified by the group_id.
    html
    Copy code
    {exp:smsp:profile not_group_id="10"}

    limit
    Limits the number of profiles displayed. For example, to show only 5 profiles:
    html
    Copy code
    {exp:smsp:profile limit="5"}

    order_by
    Specifies the field by which to sort the profiles (e.g., by username, date_joined).
    html
    Copy code
    {exp:smsp:profile order_by="username"}

    sort
    Determines the sorting order. Options are asc (ascending) or desc (descending).
    html
    Copy code
    {exp:smsp:profile sort="desc"}

    Example Usage

    Here’s an example of how you might use these parameters to display profiles of members in a specific group, excluding certain members, with a limit of 10 profiles, sorted by username in ascending order:

    html

    Copy code

    {exp:smsp:profile 

    group_id="10" 

    not_member_id="123" 

    limit="10" 

    order_by="username" 

    sort="asc"}

    <div class="member-profile">

    <h2>{username}</h2>

    <p>Email: {email}</p>

    <p>Joined: {date_joined}</p>

    </div>

    {/exp:smsp:profile}

    View Profile Module with Custom Fields

    The View Profile module is used to display detailed information about members. You can customize it to show various fields, including both static and custom fields. Below is a detailed guide on how to use this module, including how to list and render custom member fields.

    Basic View Profile Tag

    To display the profile of members, use the following tag:

    html

    Copy code

    {exp:smsp:profile}

    Content data

    {/exp:smsp:profile}

    Parameters

    member_id: Specifies the member(s) whose profile you want to display. Use "CURRENT_MEMBER" for the logged-in user, "ALL_MEMBERS" for all members, or specify individual member IDs.
    html
    Copy code
    member_id = ""

    member_id = "CURRENT_MEMBER"

    member_id = "ALL_MEMBERS"

    member_id = "53"

    member_id = "50|51|52|53"

    group_id: Filters members by group ID. Use multiple IDs separated by | or leave it blank to include all groups except "banned", "Guests", and "Pending".
    html
    Copy code
    group_id = "5"

    group_id = "5|6|7"

    not_member_id: Excludes members with the specified IDs from the output.
    html
    Copy code
    not_member_id = "2"

    not_member_id = "2|4"

    not_group_id: Excludes members from the specified groups.
    html
    Copy code
    not_group_id = "5"

    not_group_id = "5|6"

    limit: Limits the number of profiles displayed.
    html
    Copy code
    limit = "50"

    order_by: Specifies the field to sort the profiles by.
    html
    Copy code
    order_by = "member_id"

    order_by = "first_name"

    sort: Defines the sorting order (asc or desc).
    html
    Copy code
    sort = "asc"

    sort = "desc"

    Rendering Custom Member Fields

    Custom member fields can be rendered using specific tags depending on their type. Here’s how to display them:

    Checkboxes and Multi-select Dropdowns:
    html
    Copy code
    {CUSTM_MEMBER_FIELD_SHORT_NAME}

    {CUSTM_MEMBER_FIELD_SHORT_NAME:label} : {CUSTM_MEMBER_FIELD_SHORT_NAME:value}

    {/CUSTM_MEMBER_FIELD_SHORT_NAME}

    Single Value Custom Fields:
    html
    Copy code
    {CUSTM_MEMBER_FIELD_SHORT_NAME}

    OR

    {CUSTM_MEMBER_FIELD_SHORT_NAME:label} : {CUSTM_MEMBER_FIELD_SHORT_NAME:value}

    {/CUSTM_MEMBER_FIELD_SHORT_NAME}

    Example Usage

    Here’s an example of how to use the View Profile module to display all fields for members, excluding specific groups and members, and using custom fields:

    html

    Copy code

    {exp:smsp:profile

    member_id="ALL_MEMBERS"

    not_group_id="1|6"

    not_member_id="14|1"

    }

    {if no_results} <p>No data found!</p> {/if}

    <p>Your details of member ID {member_id} are as follows:</p>

    <p>All Fields:</p>

    <ul>

    {sm_list_all_fields}

    <li><b>{field_label} : </b> {field_value}</li>

    {/sm_list_all_fields}

    </ul>

    <p>Fields of Interest:</p>

    <ul>

    <li><b>{group_id_label} : </b> {group_id}</li>

    <li><b>{username_label} : </b> {username}</li>

    <li><b>{screen_name_label} : </b> {screen_name}</li>

    <li><b>{email_label} : </b> {email}</li>

    </ul>

    {/exp:smsp:profile}

    This code will:

    1. Fetch and display profiles of all members except those in groups with IDs 1 and 6, and members with IDs 14 and 1.
    2. List all available fields, including custom fields.
    3. Highlight specific fields of interest such as group ID, username, screen name, and email.

    Example Code for Forgot Password Form

    html

    Copy code

    {exp:smsp:forgot_password

    attr:id="fp_id"

    attr:class="fp_class"

    attr:name="fp-form"

    attr:data-id="fp_data_id_attr"

    return="smart-members/send-forgmail"

    error_reporting="inline"

    wrap_errors="<span class='error-inline'>|</span>"

    on_submit="fp()"

    secure_action="yes"

    secure_return="yes"

    reset_password_template="smart-members/reset-password"

    email:subject="Reset password request"

    email:template="smart-members/forgot-password-email-template"

    email:word_wrap="yes"

    email:mailtype="html"

    enable_recaptcha="yes"

    }

    <p>

    <input type="email" name="email" placeholder="Email Address">

    {error:email}

    </p>

    {if captcha}

    <p>

    <label for="captcha">Please enter in the word you see:</label>

    {captcha}

    <input type="text" name="captcha" id="captcha" />

    {error:captcha}

    </p>

    {if:elseif recaptcha}

    <p style="margin: 0;">

    <label for="recaptcha">Click the checkbox</label>

    {recaptcha}

    {error:recaptcha}

    </p>

    {/if}

    <p>

    <input type="submit" class="forgot-pass" value="Send email">

    </p>

    {/exp:smsp:forgot_password}

    Explanation of Parameters

    • attr: Adds attributes (id, class, name, data-id) to the form element.
    • return: Redirects to a specific page after successful form submission.
    • error_reporting: Determines how errors are reported (inline or outline).
    • wrap_errors: Wraps form errors in a specific HTML tag if error_reporting is inline.
    • on_submit: Calls a JavaScript function on form submission.
    • secure_action: Ensures the form action is secure (HTTPS).
    • secure_return: Ensures the return URL is secure (HTTPS).
    • reset_password_template: Specifies the template path for the reset password page.
    • email:subject: Sets the subject of the forgot password email.
    • email:template: Specifies the email template for forgot password email.
    • email:word_wrap: Enables word wrapping for email content.
    • email:mailtype: Sets the email format to text or HTML.
    • enable_recaptcha: Enables reCAPTCHA if set, otherwise normal captcha.

    Captcha and reCAPTCHA

    • {captcha}: Renders a normal captcha if enable_recaptcha is not set.
    • {recaptcha}: Renders reCAPTCHA if enable_recaptcha is set.

    Example Code for Reset Password Form

    html

    Copy code

    {if segment_3 != "reset-success"}

    {exp:smsp:reset_password

    reset_code="{segment_3}"

    rule:password="required|matches[password_confirm]|min_length[5]"

    rule:password_confirm="required|min_length[5]"

    attr:id="rp_id"

    attr:class="rp_class"

    attr:name="rp-form"

    attr:data-id="rp_data_id_attr"

    return="smart-members/reset-password/reset-success"

    enable_recaptcha="yes"

    error_reporting="inline"

    wrap_errors="<span class='error-inline'>|</span>"

    on_submit="rp()"

    }

    {if no_results}

    <h4>The reset token provided is invalid.</h4>

    {/if}

    <p>

    <input type="password" name="password" placeholder="New Password">{error:password}

    </p>

    <p>

    <input type="password" name="password_confirm" placeholder="Confirm New Password">{error:password_confirm}

    </p>

    {if captcha}

    <p>

    <label for="captcha">Please enter in the word you see:</label>

    {captcha}

    <input type="text" name="captcha" id="captcha" />

    {error:captcha}

    </p>

    {if:elseif recaptcha}

    <p style="margin: 0;">

    <label for="recaptcha">Click the checkbox</label>

    {recaptcha}

    {error:recaptcha}

    </p>

    {/if}

    <p>

    <input type="submit" class="reset" value="Reset Password">

    </p>

    {/exp:smsp:reset_password}

    {if:else}

    <p>Password successfully updated. You can now <a href="/smart-members/login">login</a> with your new credentials.</p>

    {/if}

    Explanation of Parameters

    • reset_code: This is the token used to validate the password reset request. It should be passed as a URL segment.
    • rule:password: Validation rules for the new password field (e.g., required, must match confirmation, minimum length).
    • rule:password_confirm: Validation rules for the password confirmation field (e.g., required, minimum length).
    • attr: Adds attributes (id, class, name, data-id) to the form element.
    • return: Redirects to a specific page after successful form submission.
    • error_reporting: Determines how errors are reported (inline or outline).
    • wrap_errors: Wraps form errors in a specific HTML tag if error_reporting is inline.
    • on_submit: Calls a JavaScript function on form submission.
    • secure_action: Ensures the form action is secure (HTTPS).
    • secure_return: Ensures the return URL is secure (HTTPS).
    • enable_recaptcha: Enables reCAPTCHA if set; otherwise, normal captcha is used.

    Captcha and reCAPTCHA

    • {captcha}: Renders a normal captcha if enable_recaptcha is not set.
    • {recaptcha}: Renders reCAPTCHA if enable_recaptcha is set.

    Notes

    1. Token Validation: Ensure that the token validation logic is handled correctly. If the token is invalid, show an appropriate error message.
    2. Security: Ensure that the form actions are secure, especially when dealing with sensitive operations like password resets.

    Example Code for Delete Member Form

    html

    Copy code

    {exp:smsp:delete

    attr:id="dm_id"

    attr:class="dm_class"

    attr:name="dm-form"

    attr:data-id="dm_data_id_attr"

    return="smart-members/index"

    error_reporting="inline"

    wrap_errors="<span class='error-inline'>|</span>"

    on_submit="dm()"

    enable_recaptcha="yes"

    secure_action="yes"

    secure_return="yes"

    }

    <p>

    <input type="password" name="password" placeholder="Password">

    {error:password}

    </p>

    {if captcha}

    <p>

    <label for="captcha">Please enter the word you see:</label>

    {captcha}

    <input type="text" name="captcha" id="captcha" />

    {error:captcha}

    </p>

    {if:elseif recaptcha}

    <p style="margin: 0;">

    <label for="recaptcha">Click the checkbox</label>

    {recaptcha}

    {error:recaptcha}

    </p>

    {/if}

    <p>

    <input type="submit" class="delete" value="Delete Account">

    </p>

    {/exp:smsp:delete}

    Explanation of Parameters

    • attr:FIELD_NAME: Adds attributes to the form element (e.g., id, class, name, data-id).
      • attr:id="dm_id": Sets the ID for the form.
      • attr:class="dm_class": Sets the CSS class for the form.
      • attr:name="dm-form": Sets the name attribute for the form.
      • attr:data-id="dm_data_id_attr": Sets a custom data attribute for the form.
    • return: Defines the URL to redirect to after successful form submission.
      • return="smart-members/index": Redirects to the specified page.
    • error_reporting: Determines the error reporting format.
      • error_reporting="inline": Displays errors inline with the form.
    • wrap_errors: Wraps form errors in a specific HTML tag if error_reporting is set to inline.
      • wrap_errors="<span class='error-inline'>|</span>": Wraps errors in a span with the class error-inline.
    • on_submit: Calls a JavaScript function on form submission.
      • on_submit="dm()": Calls the dm() function when the form is submitted.
    • enable_recaptcha: Enables reCAPTCHA if set; otherwise, normal captcha is used.
      • enable_recaptcha="yes": Enables reCAPTCHA for additional security.
    • secure_action: Ensures that form actions are performed over HTTPS.
      • secure_action="yes": Uses HTTPS for form actions.
    • secure_return: Ensures that the return URL is over HTTPS.
      • secure_return="yes": Uses HTTPS for the return URL.

    Captcha and reCAPTCHA

    • {captcha}: Displays a normal captcha if enable_recaptcha is not set.
    • {recaptcha}: Displays reCAPTCHA if enable_recaptcha is set.

    Notes

    1. Security: The form ensures secure actions and return URLs with HTTPS.
    2. Error Handling: Errors are displayed inline with the form, wrapped in a specified HTML element.
    3. Functionality: The dm() JavaScript function is called on form submission for additional processing if needed.

    Logout Module

    The Logout module allows users to log out of their session. It can be implemented with or without a closing tag.

    With Closing Tag

    html

    Copy code

    {exp:smsp:logout return='smart-members/index'}

    <p><a href="{url}">Logout</a></p>

    {/exp:smsp:logout}

    • return: Redirects the user to the specified page after logging out. In this example, it redirects to smart-members/index.
    • {url}: The URL for the logout action is automatically generated by the module.

    Without Closing Tag

    html

    Copy code

    <a href="{exp:smsp:logout return='smart-members/index'}">Logout</a>

    • return: Redirects to smart-members/index after the logout action is performed.

    Plan Module

    The Plan module displays a list of plans available for logged-in members. You can customize the display by using various parameters and fields.

    Example Usage

    html

    Copy code

    {exp:smsp:plan id="5|3|2|6" name="Plan A|Plan B|Plan C"}

    <h2>Plan ID: {id}</h2>

    <p>Name: {name}</p>

    <p>Description: {description}</p>

    <p>Confirmation: {confirmation}</p>

    <p>Initial Payment: {initial_payment}</p>

    <p>Billing Amount: {billing_amount}</p>

    <p>Cycle Number: {cycle_number}</p>

    <p>Cycle Period: {cycle_period}</p>

    <p>Billing Limit: {billing_limit}</p>

    <p>Trial Amount: {trial_amount}</p>

    <p>Trial Limit: {trial_limit}</p>

    <p>Allow Signups: {allow_signups}</p>

    <p>Expiration Number: {expiration_number}</p>

    <p>Expiration Period: {expiration_period}</p>

    <p>Recurring Subscription: {recurring_subscription}</p>

    <p>Custom Trial: {custom_trial}</p>

    {/exp:smsp:plan}

    Parameters

    • id: Displays plans with the specified IDs. Multiple IDs can be separated by a pipe (|).
      • Example: id="5|3|2|6"
    • name: Displays plans with the specified names. Multiple names can be separated by a pipe (|).
      • Example: name="Plan A|Plan B|Plan C"

    If no parameters are defined, all available plans will be shown.

    Fields

    • id: The ID of the plan.
    • name: The name of the plan.
    • description: A description of the plan.
    • confirmation: Confirmation details for the plan.
    • initial_payment: Initial payment required for the plan.
    • billing_amount: Amount billed for the plan.
    • cycle_number: Number of billing cycles.
    • cycle_period: Period of each billing cycle.
    • billing_limit: Billing limit of the plan.
    • trial_amount: Amount for the trial period.
    • trial_limit: Trial limit details.
    • allow_signups: Indicates if signups are allowed.
    • expiration_number: Number of expiration periods.
    • expiration_period: Period of each expiration cycle.
    • recurring_subscription: Details on recurring subscriptions.
    • custom_trial: Custom trial details.

    Notes

    • For the Logout module, you can choose between a link or a button for logging out based on your design needs.
    • For the Plan module, you can filter plans by ID or name to display only specific plans.

    Discount Code Module

    The Discount Code module allows you to show a list of discount codes and their details. You can also access related plan information using this module.

    Example Usage

    html

    Copy code

    {exp:smsp:discount_code id="5|3|2|6" code="ABCDEF|QWERTY|ZXCVBN" start_date="2021-04-08|2021-04-09" expiry_date="2021-04-08|2021-04-09"}

    <h2>Discount Code ID: {id}</h2>

    <p>Code: {code}</p>

    <p>Start Date: {start_date}</p>

    <p>Expiry Date: {expiry_date}</p>

    {discount_code:plan}

    <h3>Plan Details</h3>

    <p>Level ID: {plan:level_id}</p>

    <p>Code ID: {plan:code_id}</p>

    <p>Initial Payment: {plan:initial_payment}</p>

    <p>Billing Amount: {plan:billing_amount}</p>

    <p>Cycle Number: {plan:cycle_number}</p>

    <p>Cycle Period: {plan:cycle_period}</p>

    <p>Billing Limit: {plan:billing_limit}</p>

    <p>Trial Amount: {plan:trial_amount}</p>

    <p>Trial Limit: {plan:trial_limit}</p>

    <p>Expiration Number: {plan:expiration_number}</p>

    <p>Expiration Period: {plan:expiration_period}</p>

    <p>Recurring Subscription: {plan:recurring_subscription}</p>

    <p>Custom Trial: {plan:custom_trial}</p>

    {/discount_code:plan}

    {/exp:smsp:discount_code}

    Parameters

    • id: Filter discount codes by their IDs. Multiple IDs can be separated by a pipe (|).
      • Example: id="5|3|2|6"
    • code: Filter discount codes by their code. Multiple codes can be separated by a pipe (|).
      • Example: code="ABCDEF|QWERTY|ZXCVBN"
    • start_date: Filter discount codes by their start date. Multiple dates can be separated by a pipe (|).
      • Example: start_date="2021-04-08|2021-04-09"
    • expiry_date: Filter discount codes by their expiry date. Multiple dates can be separated by a pipe (|).
      • Example: expiry_date="2021-04-08|2021-04-09"

    If no parameters are specified, all discount codes will be shown.

    Fields

    • id: The ID of the discount code.
    • code: The discount code itself.
    • start_date: The date when the discount code starts being valid.
    • expiry_date: The date when the discount code expires.
    • uses: The number of times the discount code has been used.

    Plan Details

    To access the plan associated with a discount code, use the nested {discount_code:plan} tag. Inside this tag, you can access various details of the plan:

    • {plan:level_id}: The level ID of the plan.
    • {plan:code_id}: The code ID of the plan.
    • {plan:initial_payment}: The initial payment amount for the plan.
    • {plan:billing_amount}: The amount billed for the plan.
    • {plan:cycle_number}: The number of billing cycles.
    • {plan:cycle_period}: The period of each billing cycle.
    • {plan:billing_limit}: The billing limit for the plan.
    • {plan:trial_amount}: The trial amount for the plan.
    • {plan:trial_limit}: The trial limit for the plan.
    • {plan:expiration_number}: The number of expiration periods.
    • {plan:expiration_period}: The period of each expiration cycle.
    • {plan:recurring_subscription}: Details on recurring subscriptions.
    • {plan:custom_trial}: Custom trial details.

    Order List Module

    Example Usage

    html

    Copy code

    {exp:smsp:orders id="5|3|2|6" code="VOX5R8PHQS|VOX5R8PHQT" user_id="1|2|3" membership_id="1|2" status="success|cancelled" timestamp="2021-04-08"}

    <h2>Order ID: {id}</h2>

    <p>Order Code: {code}</p>

    <p>User ID: {user_id}</p>

    <p>Membership ID: {membership_id}</p>

    <p>Billing Name: {billing_name}</p>

    <p>Billing Street: {billing_street}</p>

    <p>Billing City: {billing_city}</p>

    <p>Billing State: {billing_state}</p>

    <p>Billing Zip: {billing_zip}</p>

    <p>Billing Country: {billing_country}</p>

    <p>Billing Phone: {billing_phone}</p>

    <p>Subtotal: {subtotal}</p>

    <p>Tax: {tax}</p>

    <p>Coupon Amount: {couponamount}</p>

    <p>Total: {total}</p>

    <p>Payment Type: {payment_type}</p>

    <p>Card Type: {cardtype}</p>

    <p>Account Number: {accountnumber}</p>

    <p>Expiration Month: {expirationmonth}</p>

    <p>Expiration Year: {expirationyear}</p>

    <p>Status: {status}</p>

    <p>Gateway: {gateway}</p>

    <p>Gateway Environment: {gateway_environment}</p>

    <p>Payment Transaction ID: {payment_transaction_id}</p>

    <p>Subscription Transaction ID: {subscription_transaction_id}</p>

    <p>Timestamp: {timestamp}</p>

    <p>Affiliate ID: {affiliate_id}</p>

    <p>Affiliate SubID: {affiliate_subid}</p>

    <p>Notes: {notes}</p>

    {orders:plan}

    <h3>Plan Details</h3>

    <p>Plan ID: {plan:id}</p>

    <p>Name: {plan:name}</p>

    <p>Description: {plan:description}</p>

    <p>Confirmation: {plan:confirmation}</p>

    <p>Initial Payment: {plan:initial_payment}</p>

    <p>Billing Amount: {plan:billing_amount}</p>

    <p>Cycle Number: {plan:cycle_number}</p>

    <p>Cycle Period: {plan:cycle_period}</p>

    <p>Billing Limit: {plan:billing_limit}</p>

    <p>Trial Amount: {plan:trial_amount}</p>

    <p>Trial Limit: {plan:trial_limit}</p>

    <p>Allow Signups: {plan:allow_signups}</p>

    <p>Expiration Number: {plan:expiration_number}</p>

    <p>Expiration Period: {plan:expiration_period}</p>

    <p>Recurring Subscription: {plan:recurring_subscription}</p>

    <p>Custom Trial: {plan:custom_trial}</p>

    {/orders:plan}

    {orders:discount_code_uses}

    <h3>Discount Code Details</h3>

    <p>Discount Code ID: {discount_code_uses:id}</p>

    <p>Code ID: {discount_code_uses:code_id}</p>

    <p>Code: {discount_code_uses:code}</p>

    <p>User ID: {discount_code_uses:user_id}</p>

    <p>Order ID: {discount_code_uses:order_id}</p>

    {/orders:discount_code_uses}

    {/exp:smsp:orders}

    Parameters

    • id: Filter orders by their ID. Multiple IDs can be separated by a pipe (|).
      • Example: id="5|3|2|6"
    • code: Filter orders by their reference code. Multiple codes can be separated by a pipe (|).
      • Example: code="VOX5R8PHQS|VOX5R8PHQT"
    • user_id: Filter orders by the member ID who placed the order. Multiple IDs can be separated by a pipe (|).
      • Example: user_id="1|2|3"
    • membership_id: Filter orders by the subscribed plan ID. Multiple IDs can be separated by a pipe (|).
      • Example: membership_id="1|2"
    • status: Filter orders by their status. Multiple statuses can be separated by a pipe (|).
      • Example: status="success|cancelled"
    • timestamp: Filter orders by the date and time they were placed.
      • Example: timestamp="2021-04-08"

    If no parameters are specified, all orders for the logged-in member will be shown.

    Fields

    • id: The ID of the order.
    • code: The reference code of the order.
    • user_id: The ID of the member who placed the order.
    • membership_id: The ID of the subscribed plan.
    • billing_name: The name on the billing information.
    • billing_street: The street address on the billing information.
    • billing_city: The city on the billing information.
    • billing_state: The state on the billing information.
    • billing_zip: The zip code on the billing information.
    • billing_country: The country on the billing information.
    • billing_phone: The phone number on the billing information.
    • subtotal: The subtotal amount of the order.
    • tax: The tax amount of the order.
    • couponamount: The amount discounted by any coupon.
    • total: The total amount of the order.
    • payment_type: The type of payment used.
    • cardtype: The type of card used for the payment.
    • accountnumber: The account number used for the payment.
    • expirationmonth: The expiration month of the payment method.
    • expirationyear: The expiration year of the payment method.
    • status: The status of the order.
    • gateway: The payment gateway used.
    • gateway_environment: The environment of the payment gateway (e.g., live or test).
    • payment_transaction_id: The ID of the payment transaction.
    • subscription_transaction_id: The ID of the subscription transaction.
    • timestamp: The date and time when the order was placed.
    • affiliate_id: The ID of the affiliate associated with the order.
    • affiliate_subid: The sub-ID of the affiliate associated with the order.
    • notes: Any additional notes related to the order.

    Get subscribed plan ID 

    Display All Subscribed Plan IDs

    To display all the subscribed plan IDs for a logged-in member, use the following tag:

    html

    Copy code

    {exp:smsp:get_subscribed_planid}

    This will output a comma-separated list of plan IDs, such as:

    Copy code

    1,2,3,5,8

    Check If a Specific Plan Is Subscribed

    To check if a particular plan ID is among the subscribed plans, you can use the following conditional logic. For instance, if you want to check if plan ID 3 is subscribed, you can do it like this:

    html

    Copy code

    {if "{exp:smsp:get_subscribed_planid}" ~ '/\b3\b/'}

    Selected

    {if:else}

    Not selected

    {/if}

    Explanation:

    • {exp:smsp:get_subscribed_planid}: Retrieves a comma-separated list of subscribed plan IDs for the logged-in member.
    • ~ '/\b3\b/': Checks if the plan ID 3 is present in the list. The \b ensures that it matches whole words only, so it won't incorrectly match parts of other numbers.

    Cancel Order

    To cancel an order, use the paypal_cancel tag. Here’s how you can use it:

    Example Usage

    html

    Copy code

    {exp:smsp:paypal_cancel order_id='{segment_2}'}

    • order_id: Replace {segment_2} with the dynamic value representing the order ID you wish to cancel.

    Checkout Form

    The checkout form tag allows users to checkout for a subscription plan. You can customize this tag with various parameters and fields to suit your needs.

    Example Usage

    html

    Copy code

    {exp:smsp:form plan_id='{segment_3}' prefix='smsp' return='smsp/confirmation' payment_confirmation='smsp/ppexpressconfirmation' cancel='smsp/cancel'}

    {smsp:plan:name}

    {smsp:plan:description}

    {smsp:plan:initial_payment}

    {smsp:plan:billing_amount}

    {smsp:plan:cycle_period}

    {smsp:plan:cycle_number}

    {smsp:plan:billing_limit}

    {smsp:plan:trial_limit}

    {smsp:plan:trial_amount}

    {/exp:smsp:form}

    Parameters

    1. plan_id: Specifies the ID of the plan the user is subscribing to. For example, plan_id='{segment_3}' where {segment_3} can be replaced with the dynamic plan ID.
    2. prefix: Allows you to set a custom prefix for plan fields. The default is smsp.
    3. return: URL to redirect to after a successful checkout. For example, return='smsp/confirmation'.
    4. payment_confirmation: URL to redirect to after payment confirmation. For example, payment_confirmation='smsp/ppexpressconfirmation'.
    5. cancel: URL to redirect to if the checkout is canceled. For example, cancel='smsp/cancel'.

    Plan Fields

    When using a prefix, you can access the following plan fields:

    • {smsp:plan:name}: Plan name
    • {smsp:plan:description}: Plan description
    • {smsp:plan:initial_payment}: Initial payment amount
    • {smsp:plan:billing_amount}: Billing amount
    • {smsp:plan:cycle_period}: Billing cycle period
    • {smsp:plan:cycle_number}: Billing cycle number
    • {smsp:plan:billing_limit}: Billing limit
    • {smsp:plan:trial_amount}: Trial amount
    • {smsp:plan:trial_limit}: Trial limit

    Checkout Form

    The smsp:form tag facilitates the checkout process for a subscription plan. It allows you to display a form where users can select a plan and proceed with the payment.

    Basic Structure

    html

    Copy code

    {exp:smsp:form plan_id='{segment_3}' prefix='smsp' return='smsp/confirmation' payment_confirmation='smsp/ppexpressconfirmation' cancel='smsp/cancel'}

    {smsp:plan:name}

    {smsp:plan:description}

    {smsp:plan:initial_payment}

    {smsp:plan:billing_amount}

    {smsp:plan:cycle_period}

    {smsp:plan:cycle_number}

    {smsp:plan:billing_limit}

    {smsp:plan:trial_amount}

    {smsp:plan:trial_limit}

    {/exp:smsp:form}

    Parameters

    1. plan_id: Specifies the ID of the subscription plan that the user will be checking out for. For example, plan_id='{segment_3}' where {segment_3} should be replaced with the dynamic value of the plan ID.
    2. prefix: Defines a custom prefix for the plan fields. If not specified, the default prefix is smsp. For example, prefix='smsp'.
    3. return: URL to redirect the user to after a successful checkout. For example, return='smsp/confirmation'.
    4. payment_confirmation: URL to redirect the user to after the payment has been confirmed. For example, payment_confirmation='smsp/ppexpressconfirmation'.
    5. cancel: URL to redirect the user to if the checkout process is canceled. For example, cancel='smsp/cancel'.

    Plan Fields

    With the specified prefix, you can access the following plan fields:

    • {smsp:plan:name}: The name of the plan.
    • {smsp:plan:description}: The description of the plan.
    • {smsp:plan:initial_payment}: The initial payment required for the plan.
    • {smsp:plan:billing_amount}: The amount to be billed regularly for the plan.
    • {smsp:plan:cycle_period}: The billing cycle period (e.g., monthly, yearly).
    • {smsp:plan:cycle_number}: The number of cycles for the plan.
    • {smsp:plan:billing_limit}: The limit on billing (if any).
    • {smsp:plan:trial_amount}: The trial amount for the plan.
    • {smsp:plan:trial_limit}: The limit for the trial period.

    Example

    Here is a practical example showing how you might use the smsp:form tag on a page:

    html

    Copy code

    {exp:smsp:form plan_id='{segment_3}' prefix='smsp' return='smsp/confirmation' payment_confirmation='smsp/ppexpressconfirmation' cancel='smsp/cancel'}

    <h1>{smsp:plan:name}</h1>

    <p>{smsp:plan:description}</p>

    <p>Initial Payment: {smsp:plan:initial_payment}</p>

    <p>Billing Amount: {smsp:plan:billing_amount}</p>

    <p>Billing Cycle: {smsp:plan:cycle_period} for {smsp:plan:cycle_number} cycles</p>

    <p>Billing Limit: {smsp:plan:billing_limit}</p>

    <p>Trial Amount: {smsp:plan:trial_amount}</p>

    <p>Trial Limit: {smsp:plan:trial_limit}</p>

    <button type="submit">Subscribe Now</button>

    {/exp:smsp:form}

    Form Fields

    Here's an example of how to create a checkout form using the smsp:form tag with various form fields:

    Form Structure

    html

    Copy code

    {exp:smsp:form plan_id='{segment_3}' prefix='smsp' return='smsp/confirmation' payment_confirmation='smsp/ppexpressconfirmation' cancel='smsp/cancel'}

    <font color="red">{smsp:checkout:error}</font>

    Apply Discount:

    <input type='text' name='discount_code' value='{smsp:form:discount_code}' />

    First Name:

    <input type='text' name='first_name' value='{smsp:form:first_name}' required='true' />

    Last Name:

    <input type='text' name='last_name' value='{smsp:form:last_name}' />

    Email:

    <input type='email' name='email' value='{smsp:form:email}' required='true' />

    Address 1:

    <input type='text' name='address1' value='{smsp:form:address1}' required='true' />

    Address 2:

    <input type='text' name='address2' value='{smsp:form:address2}' />

    City:

    <input type='text' name='city' value='{smsp:form:city}' required='true' />

    State:

    <input type='text' name='state' value='{smsp:form:state}' required='true' />

    Postal Code:

    <input type='text' name='postal_code' value='{smsp:form:postal_code}' required='true' />

    Phone:

    <input type='text' name='phone' value='{smsp:form:phone}' required='true' />

    Country:

    <select name='country' value='{smsp:form:country}' required='true'>

    <option value='GB' data-countryISDCode='44'>UK (+44)</option>

    <option value='US' data-countryISDCode='1' selected='true'>USA (+1)</option>

    <option value='IN' data-countryISDCode='91'>India (+91)</option>

    </select>

    Card Number:

    <input type='text' name='card_number' />

    Expiry Month:

    <select name='expiry_month' value='{smsp:form:expiry_month}'>

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    <option>5</option>

    <option>6</option>

    <option>7</option>

    <option>8</option>

    <option>9</option>

    <option>10</option>

    <option>11</option>

    <option>12</option>

    </select>

    Expiry Year:

    <select name='expiry_year' value='{smsp:form:expiry_year}'>

    <option>2021</option>

    <option>2022</option>

    <option>2023</option>

    <option>2024</option>

    <option>2025</option>

    </select>

    CVC:

    <input type='text' name='cvc' value='132' />

    Captcha: {smsp:form:captcha}

    <input type='submit' class='register' value='Register' />

    {/exp:smsp:form}

    Explanation of Fields

    • Discount Code: {smsp:form:discount_code}
    • First Name: {smsp:form:first_name}
    • Last Name: {smsp:form:last_name}
    • Email: {smsp:form:email}
    • Address 1: {smsp:form:address1}
    • Address 2: {smsp:form:address2}
    • City: {smsp:form:city}
    • State: {smsp:form:state}
    • Postal Code: {smsp:form:postal_code}
    • Phone: {smsp:form:phone}
    • Country: {smsp:form:country}
    • Card Number: {smsp:form:card_number}
    • Expiry Month: {smsp:form:expiry_month}
    • Expiry Year: {smsp:form:expiry_year}
    • CVC: {smsp:form:cvc}
    • Captcha: {smsp:form:captcha}
    • Error Message: {smsp:checkout:error}

    Show entries for the subscribed plan

    1. Retrieve Subscribed Plan Entries: Use the {exp:smsp:get_entries} tag to get the entry IDs for the subscribed plan.
    2. Display Entries: Use the {exp:channel:entries} tag to show the entries. You'll need to parse the entries based on the IDs returned by {exp:smsp:get_entries}.

    Example Code

    html

    Copy code

    {exp:smsp:get_entries}

    {exp:channel:entries entry_id="{entry_id}" parse="inward"}

    <h2>{title}</h2>

    <p>{content}</p>

    {/exp:channel:entries}

    {/exp:smsp:get_entries}

    Explanation

    • {exp:smsp:get_entries}: This tag retrieves the entry IDs associated with the subscribed plans for the logged-in user.
    • {exp:channel:entries entry_id="{entry_id}" parse="inward"}: This tag uses the entry IDs from the previous tag to fetch and display the corresponding entries from the specified channel. Adjust {entry_id} to the actual field or tag returning the entry IDs.

    Considerations

    • Permissions: Ensure that the channels, member groups, and categories are correctly set up during plan creation to match the entries you want to display.
    • Error Handling: Implement error handling or fallback content if no entries are returned or if the user is not subscribed to any plans.

    Switch plan

    To enable users to switch plans with a single click, you can use the {exp:smsp:form} tag with specific parameters to handle the process of canceling the current plan and subscribing to a new one. Below is a detailed explanation and example of how to set this up:

    Parameters for Switching Plan

    1. plan_id: The ID of the new plan to which the user wants to switch.
    2. previous_plan: The ID of the current plan that the user is canceling.
    3. upgrade_plan: Set to "yes" to indicate that this is a plan switch.
    4. prefix: The prefix for form fields.
    5. return: The URL to redirect to after a successful switch.
    6. payment_confirmation: The URL to redirect to for payment confirmation.
    7. cancel: The URL to redirect to if the user cancels the operation.

    Example Code

    html

    Copy code

    {exp:smsp:form 

    plan_id='{segment_3}' 

    previous_plan='{segment_4}' 

    upgrade_plan="yes" 

    prefix='smsp' 

    return="smsp/confirmation" 

    payment_confirmation="smsp/ppexpressconfirmation" 

    cancel="smsp/cancel"

    }

    <font color="red">{smsp:checkout:error}</font>

    Apply Discount: <input type='text' name="discount_code" value="{smsp:form:discount_code}" />

    First Name: <input type='text' name="first_name" value="{smsp:form:first_name}" required="true" />

    Last Name: <input type='text' name="last_name" value="{smsp:form:last_name}" />

    Email: <input type='text' name="email" value="{smsp:form:email}" required="true" />

    Address1: <input type='text' name="address1" value="{smsp:form:address1}" required="true" />

    Address2: <input type='text' name="address2" value="{smsp:form:address2}" />

    City: <input type='text' name="city" value="{smsp:form:city}" required="true" />

    State: <input type='text' name="state" value="{smsp:form:state}" required="true" />

    Postal Code: <input type='text' name="postal_code" value="{smsp:form:postal_code}" required="true" />

    Phone: <input type='text' name="phone" value="{smsp:form:phone}" required="true" />

    Country: 

    <select name="country" value="{smsp:form:country}" required="true">

    <option value="GB" data-countryISDCode="44">UK (+44)</option>

    <option value="US" data-countryISDCode="1" selected="true">USA (+1)</option>

    <option value="IN" data-countryISDCode="91">India (+91)</option>

    </select>

    Card Number: <input type='text' name="card_number" />

    Expiry Month: 

    <select name="expiry_month" value="{smsp:form:expiry_month}">

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    <option>5</option>

    <option>6</option>

    </select>

    Expiry Year: 

    <select name="expiry_year" value="{smsp:form:expiry_year}">

    <option>2021</option>

    <option>2022</option>

    <option selected="">2023</option>

    <option>2024</option>

    </select>

    CVC: <input type='text' name="cvc" value="132" />

    Captcha: {smsp:form:captcha}

    <input type="submit" class="register" value="Switch Plan">

    {/exp:smsp:form}

    Explanation

    • {segment_3}: Represents the new plan ID. You should replace this with the actual method of retrieving the new plan ID (e.g., from a URL segment or another source).
    • {segment_4}: Represents the current plan ID that is being canceled.
    • upgrade_plan="yes": This parameter is mandatory for switching plans and indicates that the form is being used for an upgrade.
    • prefix='smsp': Defines the prefix for form fields. Adjust this as needed.
    • return, payment_confirmation, and cancel: Define the URLs to handle redirection based on the outcome of the form submission.

    Get Support

    FAQs

    Change log

    version 1.0.3

    • Social login changes with new API

    version 1.0.2

    • Update add-on with support Expression Engine 7

    version 1.0.1

    • Update add-on with minor bug Fixes

    version 1.0.0

    • Initial Version

    Get Premium Support

    Request a Quote

    Submit this form now and we will get back to you promptly!